
goog.provide('esn.ProgressBar');

goog.require('esn.CommunityDormSurvey');
goog.require('esn.CommunityFloorSurvey');
goog.require('esn.PersonalSurvey');
goog.require('esn.EnvironmentSurvey');
goog.require('esn.NetworkCreator');
goog.require('esn.NetworkSurvey');
goog.require('esn.RandomFriendsSurvey');
goog.require('esn.StrainedNetworkSurvey');
goog.require('esn.soy.progressBar');
goog.require('goog.style');
goog.require('goog.ui.Component');


esn.ProgressBar = function(opt_domHelper) {
  goog.base(this, opt_domHelper);

  // Map of percent completed for each survey section.
  this.percentCompletedMap_ = {};
};
goog.inherits(esn.ProgressBar, goog.ui.Component);

esn.ProgressBar.SurveyPercentage = goog.object.create(
    esn.PersonalSurvey.SECTION_ID, 20,
    esn.CommunityFloorSurvey.SECTION_ID, 12,
    esn.EnvironmentSurvey.SECTION_ID, 18,
    esn.NetworkCreator.SECTION_ID, 15,
    esn.NetworkSurvey.SECTION_ID, 25,
    esn.RandomFriendsSurvey.SECTION_ID, 10);

esn.ProgressBar.prototype.progressBarWidth_;

esn.ProgressBar.prototype.completedBarEl_;

esn.ProgressBar.prototype.innerPercentEl_;

esn.ProgressBar.prototype.outerPercentEl_;

esn.ProgressBar.prototype.completedBarTd_;

esn.ProgressBar.prototype.percentOuterTd_;

esn.ProgressBar.prototype.createDom = function() {
  goog.base(this, 'createDom');

  this.setElementInternal(soy.renderAsElement(esn.soy.progressBar.content));

  this.completedBarEl_ = this.getElementByClass('completedBar');

  this.innerPercentEl_ = this.getElementByClass('inner');

  this.outerPercentEl_ = this.getElementByClass('outer');

  this.completedBarTd_ = this.getElementByClass('completedBarTd');

  this.percentOuterTd_ = this.getElementByClass('percentOuterTd');
};

esn.ProgressBar.prototype.enterDocument = function() {
  goog.base(this, 'enterDocument');
  // Can't calculation the progress bar size until it's in the dom.
  this.progressBarWidth_ = goog.style.getSize(this.getElement()).width;
  this.updateDisplay_(0);
};

esn.ProgressBar.prototype.updatePercent = function(sectionId,
    sectionPercentCompleted) {
  this.percentCompletedMap_[sectionId] = sectionPercentCompleted;
  this.updateDisplay_(this.getOverallPercentCompleted_());
};

esn.ProgressBar.prototype.show = function() {
  if (this.getElement()) {
    goog.style.showElement(this.getElement(), true);
  }
};

esn.ProgressBar.prototype.hide = function() {
  if (this.getElement()) {
    goog.style.showElement(this.getElement(), false);
  }
};

esn.ProgressBar.prototype.getOverallPercentCompleted_ = function() {
  var percentCompleted = 0;
  goog.object.forEach(this.percentCompletedMap_, function(percent, sectionId) {
    percentCompleted +=
        percent * (esn.ProgressBar.SurveyPercentage[sectionId] / 100);
  }, this);
  return Math.floor(percentCompleted);
};

esn.ProgressBar.prototype.updateDisplay_ = function(percentCompleted) {
  if (this.getElement() && goog.isDef(this.progressBarWidth_)) {
    // Set width of completed progress bar.
    var completedBarWidth =
        Math.floor(this.progressBarWidth_ * (percentCompleted / 100));
    goog.style.setStyle(this.completedBarEl_, 'width',
        completedBarWidth + 'px');

    // Set table cell widths.
    goog.style.setStyle(this.completedBarEl_, 'width',
        completedBarWidth + 'px');
    goog.style.setStyle(this.percentOuterTd_, 'width',
        (this.progressBarWidth_ - completedBarWidth) + 'px');

    // Set progress bar percentage.
    var dom = this.getDomHelper();
    if (percentCompleted < 90) {
      goog.style.showElement(this.innerPercentEl_, false);
      dom.setTextContent(this.outerPercentEl_, percentCompleted + '%');
      goog.style.showElement(this.outerPercentEl_, true);
      goog.style.showElement(this.outerPercentEl_.parentNode, true);
    } else {
      goog.style.showElement(this.outerPercentEl_, false);
      dom.setTextContent(this.innerPercentEl_, percentCompleted + '%');
      goog.style.showElement(this.innerPercentEl_, true);
      goog.style.showElement(this.outerPercentEl_.parentNode, false);
    }
  }
};
